<template>
    <div>
        <Row class="menu-header">
            <Col span="5" style="text-align: left;">
                <img class="index-icon" src="../../assets/index/i-icon1.png">
                <span class="index-title"><strong>热门推荐</strong></span>
                <span class="index-desc">/ Hot Recommend</span>
            </Col>
            <Col span="16" offset="3">
                <Row type="flex" justify="center">
                    <Col v-for="i in hotMenus" :key="i.id" span="2" style="margin-right: 3%">
                        <el-button plain round size="small" class="hot-button" @click="getContent(i)">
                            <strong>{{i.name}}</strong></el-button>
                    </Col>
                    <Col span="2">
                        <Button type="text">查看更多></Button>
                    </Col>
                </Row>

            </Col>
        </Row>
        <Row type="flex" justify="center" id="hot-content">
            <Col span="4" v-for="i in contents" :key="i.id" :style="{padding: '0.4%'}">
                <el-card :body-style="{ padding: '0px' }" class="h-content" shadow="hover">
                    <div style="width: 100%;height: 12rem;overflow:hidden">
                        <img :src="i.pic" class="c-img">
                    </div>
                    <Row class="content-desc">
                        <Col span="7">
                            <Tag v-if="i.mark == 1" color="volcano">{{i.markname}}</Tag>
                            <Tag v-else-if="i.mark == 2" color="blue">{{i.markname}}</Tag>
                            <Tag v-else-if="i.mark == 3" color="green">{{i.markname}}</Tag>
                            <Tag v-else-if="i.mark == 4" color="gold"> {{i.markname}}</Tag>
                        </Col>
                        <Col span="17">
                            <div class="content-title">
                                {{i.title}}
                            </div>
                        </Col>
                    </Row>
                    <Row class="content-desc">
                        <div class="content-seller">
                            销量：{{i.sellerVolume}}
                        </div>
                    </Row>
                    <Row class="content-desc">
                        <div class="content-seller content-price">
                            <span style="color: red"><strong>￥{{i.newPrice}} &nbsp; </strong></span>
                            <span style="text-decoration:line-through"> ￥{{i.oldPrice}}</span>
                        </div>
                    </Row>
                    <Row class="content-desc">
                        <div class="content-seller-name" @click="userInfo(i.sellerId)">
                            <Avatar style="float: left" size="small" :src="i.avatar"/>
                            <div style="float: left ;margin-left: 0.3rem">
                                {{i.sellerName}}
                            </div>
                        </div>
                    </Row>

                </el-card>
            </Col>

        </Row>
    </div>
</template>

<script>
    export default {
        name: "hot",
        data() {
            return {
                hotMenus: [
                    {id: 1, name: "精选"},
                    {id: 2, name: "职场"},
                    {id: 3, name: "教育"},
                    {id: 4, name: "财经"},
                    {id: 5, name: "人文"},
                    {id: 6, name: "儿童"},
                    {id: 7, name: "女性"},
                    {id: 8, name: "精品课"},
                ],
                contents:[
                    //type为主类型，subtype为第二种类型
                    {id: 1, title: "再见：曾在青春里碰过面的那个人", pic: require("../../assets/hotRecommend/hot1.jpeg"), newPrice: 100, oldPrice:200, mark: 1, markname: "精品", subtype: 1,type :2,sellerId:1, sellerName: "谢广坤",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 2, title: "高考落幕：终于我还是失去了你", pic: require("../../assets/hotRecommend/hot2.jpeg"), newPrice: 10.6, oldPrice:200, mark: 2, markname: "热卖", subtype: 1,type :2,sellerId:2,sellerName: "苏大强",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 3, title: "修炼爱情", pic: require("../../assets/hotRecommend/hot3.jpeg"), newPrice: 30.93, oldPrice:200, mark: 1, markname: "精品", subtype: 1,type :2,sellerId:3,sellerName: "比比强",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 4, title: "红豆生南国", pic: require("../../assets/hotRecommend/hot4.jpeg"), newPrice: 100, oldPrice:200, mark: 3, markname: "低价", subtype: 1,type :2,sellerId:4,sellerName: "坑比含",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 5, title: "遥远的她", pic: require("../../assets/hotRecommend/hot5.jpeg"), newPrice: 100, oldPrice:200, mark: 4, markname: "推荐", subtype: 1,type :2,sellerId:5,sellerName: "狗哥",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 6, title: "“剧”有道理：解密影视中的人生成功密码", pic: require("../../assets/hotRecommend/hot6.jpeg"), newPrice: 100, oldPrice:200, mark: 3, markname: "低价", subtype: 1,type :2,sellerId:33,sellerName: "倚楼听雨",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 7, title: "乐嘉：性格色彩亲子宝典", pic: require("../../assets/hotRecommend/hot7.jpg"), newPrice: 100, oldPrice:200, mark: 3, markname: "低价", subtype: 1,type :2,sellerId:13,sellerName: "守株待兔",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 8, title: "终结拖延症：抢回时间才是真正赚到", pic: require("../../assets/hotRecommend/hot8.jpeg"), newPrice: 100, oldPrice:200, mark: 1, markname: "精品", subtype: 1,type :2,sellerId:14,sellerName: "卖片的",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 9, title: "《都挺好》中隐藏的中国人性格密码", pic: require("../../assets/hotRecommend/hot9.jpeg"), newPrice: 100, oldPrice:200, mark: 1, markname: "精品", subtype: 1,type :2,sellerId:15,sellerName: "galen",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 10, title: "关于加薪的十个问题", pic: require("../../assets/hotRecommend/hot10.jpeg"), newPrice: 100, oldPrice:200, mark: 2, markname: "精品", subtype: 1,type :2,sellerId:17,sellerName: "galen",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 11, title: "销售就是要玩转情商", pic: require("../../assets/hotRecommend/hot11.jpeg"), newPrice: 100, oldPrice:200, mark: 4, markname: "推荐", subtype: 1,type :2,sellerId:19,sellerName: "galen",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                    {id: 12, title: "高段位两性调教术：塑造完美老公从“好好说话”开始", pic: require("../../assets/hotRecommend/hot12.jpeg"), newPrice: 100, oldPrice:200, mark: 1, markname: "精品", subtype: 10,type :2,sellerId:1,sellerName: "galen",sellerVolume: 281,avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg"},
                ]
            }
        },
        methods: {
            getContent(menu) {
                this.$Message.info(menu.name);
            },
            userInfo (userId) {
                this.$Message.info("卖家的id为" + userId);
            }
        }
    }
</script>

<style scoped>

    .hot-button {
        padding: 12% 35%;
        font-size: 12px;
    }

    /*#hot-content {*/
    /*    margin-top: 20px;*/
    /*}*/


    .content-price{
        padding-bottom: 10px;
        border-bottom: solid 1px #e8eaec;
    }
</style>